<template>
  <div>
    <!-- 使用三级联动全局组件，因此不需要再引入 -->
    <typeNav />
    <list-container />
    <today-recommend />
    <rank />
    <like />
    <floor v-for="f in floorList" :key="f.id" :list="f"/>
    <brand />
  </div>
</template>

<script>
// 引入其余的组件
// 引入轮播图和快报
const ListContainer = ()=>import(/* webpackChunkName: "group1" */ '@/pages/Home/ListContainer')
// 今日推荐
const TodayRecommend = ()=>import(/* webpackChunkName: "group1" */ '@/pages/Home/TodayRecommend')
// 热卖排行
const Rank = ()=>import(/* webpackChunkName: "group1" */ '@/pages/Home/Rank')
// 猜你喜欢
const Like = ()=>import('@/pages/Home/Like')
// 楼层
const Floor = ()=>import('@/pages/Home/Floor')
// 商标
const Brand = ()=>import('@/pages/Home/Brand')

import { mapState } from "vuex";
export default {
  name: "Home",
  components: { ListContainer, TodayRecommend, Rank, Like, Floor, Brand },
  mounted() {
    // 获取floor数据
    this.$store.dispatch("floorList");
    // 已经在全局前置路由守卫中设置
    // try {
    //   // 通知vuex通过token获取用户信息
    //   (localStorage.getItem('token')) && this.$store.dispatch('getUserInfoByToken')
    // } catch (error) {
    //   alert(error.message)
    // }
  },
  computed: {
    ...mapState({
      floorList: (state) => state.home.floorList,
    }),
  },
};
</script>

<style lang="less" scoped>
</style>